<template>
  <div class="xtx-pay-page">
    <div class="container">
<!--      加载状态-->
<!--      <div v-if="loading" class="loading">-->
<!--        <p>加载中，请稍后...</p>-->
<!--      </div>-->

      <!-- 付款信息 -->
      <div class="pay-info">
        <span class="icon iconfont icon-queren2"></span>
        <div class="tip">
          <p>订单提交成功！请尽快完成支付。</p>
          <p>支付还剩 <span>{{ formatTime }}</span>, 超时后将取消订单</p>
        </div>
        <div class="amount">
          <span>应付总额：</span>
          <span>¥{{  payInfo.value || '加载中...' }}</span>
        </div>
      </div>
      <!-- 付款方式 -->
      <div class="pay-type">
        <p class="head">选择以下支付方式付款</p>
        <div class="item">
          <p>支付平台</p>
          <a class="btn wx" href="javascript:;">微信支付</a>
          <a class="btn alipay" href="javascript:;" @click="handlePay">支付宝支付</a>
        </div>
        <div class="item">
          <p>支付方式</p>
          <a class="btn" href="javascript:;">招商银行</a>
          <a class="btn" href="javascript:;">工商银行</a>
          <a class="btn" href="javascript:;">建设银行</a>
          <a class="btn" href="javascript:;">农业银行</a>
          <a class="btn" href="javascript:;">交通银行</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import {useRouter} from "vue-router";

const payInfo = ref(0);
const orderNo = ref(null);
const router = useRouter();

// const loading = ref(true); // 用于表示数据加载状态

onMounted(async () => {
  //调用后端接口获取支付金额
  try{
    timer = setInterval(updateCountdown, 1000);

    //获取订单号
    orderNo.value = router.currentRoute.value.params.order_no;
    console.log("订单号为："+orderNo.value);

    if(!orderNo.value){
      ElMessage.error("订单号未找到");
      return;
    }

    const response = await axios.get(`/dressup/order/payment/${orderNo.value}`);
    if(response.data.code === 200){
      payInfo.value = response.data.data || 0;  //直接更新payInfo
      console.log("payInfo.value"+payInfo.value);
    }else{
      ElMessage.error(response.data.message || '获取订单支付金额失败');
    }
  }catch (error){
    console.log('查询订单金额失败：',error);
    ElMessage.error('查询订单金额失败');
  }
  // finally {
  //   loading.value=false;
  // }

});

const formatTime = ref('00:30:00'); // 初始化倒计时为30分钟

// 发起支付请求
const handlePay = async () => {
  const subject = '订单支付';
  const price = payInfo.value;
  const orderNoPass = orderNo.value;

  // 检查金额是否有效
  if (!price || price <= 0) {
    ElMessage.error('订单金额无效');
    return;
  }

  console.log('orderNoPass',orderNoPass);

  // // 检查支付商品列表
  // if (payList.value.length === 0) {
  //   ElMessage.error('没有商品可支付');
  //   return;
  // }

  try {
    // 向后端支付接口请求支付页面表单
    const response = await axios.get('/pay', {
      params: {
        orderNo:orderNoPass,
        price,
        subject,
      },
    });

    if (response.data) {
      // 支付页面链接
      const formHtml = response.data;
      const container = document.createElement('div');
      container.innerHTML = formHtml;
      document.body.appendChild(container);
      const form = container.querySelector('form');
      if (form) {
        form.submit(); // 提交支付表单
      }
    } else {
      ElMessage.error('获取支付链接失败');
    }
  } catch (error) {
    console.error('支付请求失败:', error);
    ElMessage.error('支付请求失败');
  }
}

// 倒计时逻辑
let countdown = 1800; // 30分钟
let timer = null;

const updateCountdown = () => {
  const minutes = Math.floor(countdown / 60);
  const seconds = countdown % 60;
  formatTime.value = `00:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  if (countdown <= 0) {
    clearInterval(timer);
    ElMessage.error('支付超时，订单已取消');
  } else {
    countdown--;
  }
};



onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.xtx-pay-page {
  padding: 20px;
  text-align: center;
}

.pay-info {
  margin-bottom: 20px;
}

.pay-info .icon {
  font-size: 40px;
  color: #12d269;
}

.pay-info .tip p {
  margin: 10px 0;
}

.pay-info .amount {
  font-size: 24px;
  color: red;
}

.pay-type .head {
  font-size: 20px;
  margin-bottom: 10px;
}

.pay-type .item {
  margin-bottom: 10px;
}

.pay-type .item p {
  margin-right: 20px;
  display: inline-block;
}

.pay-type .item .btn {
  display: inline-block;
  padding: 10px 20px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-decoration: none;
  color: black;
}

.pay-type .item .btn:hover {
  background-color: #f0f0f0;
}

.pay-type .item .alipay {
  background-color: #1471f5;
  color: white;
}

.pay-type .item .alipay:hover {
  background-color: #389fd6;
}

.pay-type .item .wx{
  background-color: #12d269;
  color: white;
}
</style>

<!--&lt;!&ndash;&lt;!&ndash;<script setup>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;// import { getOrderAPI } from '@/apis/pay';&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;import { onMounted, ref } from 'vue';&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;import { useRoute } from 'vue-router';&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;// import { useCountDown } from '@/composables/useCountDown';&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;const { formatTime, start } = useCountDown()&ndash;&gt;&ndash;&gt;-->

<!--&lt;!&ndash;&lt;!&ndash;// 获取订单数据&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;const route = useRoute()&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;const payInfo = ref({})&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;const getPayInfo = async () => {&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;  const res = await getOrderAPI(route.query.id)&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;  payInfo.value = res.result&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;  // 初始化倒计时&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;  start(res.result.countdown)&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;}&ndash;&gt;&ndash;&gt;-->

<!--&lt;!&ndash;&lt;!&ndash;onMounted(() => getPayInfo())&ndash;&gt;&ndash;&gt;-->

<!--&lt;!&ndash;&lt;!&ndash;// 跳转支付&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;const backURL = 'http://127.0.0.1:5173/paycallback'&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;const redirectUrl = encodeURIComponent(backURL)&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;</script>&ndash;&gt;&ndash;&gt;-->


<!--<template>-->
<!--  <div class="xtx-pay-page">-->
<!--    <div class="container">-->
<!--      &lt;!&ndash; 付款信息 &ndash;&gt;-->
<!--      <div class="pay-info">-->
<!--        <span class="icon iconfont icon-queren2"></span>-->
<!--        <div class="tip">-->
<!--          <p>订单提交成功！请尽快完成支付。</p>-->
<!--          <p>支付还剩 <span>{{ formatTime }}</span>, 超时后将取消订单</p>-->
<!--        </div>-->
<!--        <div class="amount">-->
<!--          <span>应付总额：</span>-->
<!--&lt;!&ndash;          <span>¥{{ payInfo.payMoney?.toFixed(2) }}</span>&ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash; 付款方式 &ndash;&gt;-->
<!--      <div class="pay-type">-->
<!--        <p class="head">选择以下支付方式付款</p>-->
<!--        <div class="item">-->
<!--          <p>支付平台</p>-->
<!--          <a class="btn wx" href="javascript:;"></a>-->
<!--          <a class="btn alipay" :href="payUrl"></a>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <p>支付方式</p>-->
<!--          <a class="btn" href="javascript:;">招商银行</a>-->
<!--          <a class="btn" href="javascript:;">工商银行</a>-->
<!--          <a class="btn" href="javascript:;">建设银行</a>-->
<!--          <a class="btn" href="javascript:;">农业银行</a>-->
<!--          <a class="btn" href="javascript:;">交通银行</a>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->

<!--//支付宝沙箱-->
<!--// 发起支付请求-->
<!--import {ElMessage} from "element-plus";-->
<!--import axios from "axios";-->



<!--//返回支付结果-->
<!--const handleReturn = async () => {-->
<!--  // 获取 URL 中的参数-->
<!--  const urlParams = new URLSearchParams(window.location.search);-->
<!--  const tradeStatus = urlParams.get('trade_status');  // 获取支付状态-->

<!--  if (tradeStatus === 'TRADE_SUCCESS') {-->
<!--    ElMessage.success('支付成功');-->
<!--    // 可以在这里做一些后续的处理，比如跳转到订单详情页面-->
<!--  } else {-->
<!--    ElMessage.error('支付失败或被取消');-->
<!--  }-->
<!--};-->

<!--</script>-->